<template>
  <div class="playBox">
    <!-- 划分  =>细分封装
          1：划分模块
          2：放位置
        -->
    <div class="topNav">
      <div class="topNav-one w-flex3">
        <div class="topNav-one-left w-flex3">
          <span>课程状态</span>:<Select :clears="clears" @getSelectD="getSelectD" :playcList="playcList" placeholder="请选择课程状态"></Select>
        </div>
        <div class="topNav-one-right w-flex3">
          <span>课程名称</span> :<Inputw :clears="clears" @getInputV="getInputV"></Inputw>
        </div>
        <div class="topNav-one-three">

        </div>
      </div>
      <div class="topNav-two w-flex3">
        <div class="topNav-one-left w-flex3">
          <span>开始日期</span>:<TimeSelect :clears="clears" @getTimeV="getTimeV"></TimeSelect>
        </div>
        <div class="topNav-one-right w-flex3">
          <TopSelect :clears="clears" @getTimeN="getTimeN"></TopSelect>
        </div>
        <div class="topNav-one-right w-flex3">
          <el-button type="primary" @click="getTopSelect">查询</el-button>
          <el-button @click="clearData">重置</el-button>
        </div>
      </div>
    </div>

    <div class="content">
      <!-- 列表 -->
      <!-- 划分 -->
      <div class="content-top w-flex3">
        <div class="content-top-left">
          直播
        </div>
        <div class="content-top-right">
          <el-button type="primary" :icon="Plus">新建</el-button>
          <el-button>批量操作</el-button>

        </div>
      </div>

      <!-- list  -->
      <TableW :playLists="playLists"></TableW>
      <!-- 分页 -->

      <Paginationw :pagesObj="pagesObj " @getPageData="getPageData"></Paginationw>
    </div>

  </div>
</template>

<script setup lang="ts">
import Select from '@/ElementC/Select/index.vue'
import Inputw from '@/ElementC/Inputw/index.vue'
import TimeSelect from '@/ElementC/TimeSelect/index.vue'
import TopSelect from '@/ElementC/TopSelect/index.vue'
import TableW from '@/ElementC/TableW/index.vue'
import Paginationw from '@/ElementC/Paginationw/index.vue'
import { Plus } from '@element-plus/icons-vue'
import { getckchengPlay, PlayListData } from '@/http/api/play'
import { ref, reactive } from 'vue'
import {useStore} from 'vuex'
  let store:any = useStore()
//课程选择  数据基本都是在父组件获取 ，通过父组件给子组件数据
let playcList = ref([])
const getPlayC = () => {
  getckchengPlay({}).then((res: any) => {

    playcList.value = res.list
  })
}
getPlayC()


//list 数据
let playLists = ref([])
let pagesObj = reactive({
  cuarrentpage:1,
  allPage:0,
  pageNums:1,
  allNums:0,
})
const getPlayListD = (Playstate = '全部', time = '今天', name = '',currentPage='1') => {
  PlayListData({ Playstate: Playstate, time: time, name: name, currentPage:currentPage}).then((res: any) => {
    //获取到数据 =》将这个数据给子组件
    console.log(res.data)
    
    playLists.value = res.data.list
    pagesObj.cuarrentpage= res.data.cuarrentpage
    pagesObj.allPage= res.data. allPage
    pagesObj.pageNums= res.data.pageNums
    pagesObj.allNums= res.data.allNums
  })
}

getPlayListD()


// 接收头部选择的数据 =>

// 列表需要的数据
let listParms = reactive({
  Playstate: '全部',
  time: '今天',
  name: ''
})
//状态
const getSelectD = (val: any) => {


  listParms.Playstate = val
}

const getInputV = (val: any) => {
  console.log(val, 555555);
  listParms.name = val

}


const getTimeV = (val: any) => {
  listParms.time = val
  store.commit('play/changeTime',val)
}


const getTimeN = (val: any) => {
  console.log('点击了头部时间选择');
  
  listParms.time = val
  // tiemClear.value = !tiemClear.value 
  //把数据需要放到vuex中去
  store.commit('play/changeTime',val)
}


const getTopSelect = () => {
 

  getPlayListD(listParms.Playstate,listParms.time,listParms.name)

}


//清理头部

// 1 页面加载完毕了，子组件是不是不会在重新创建，
// 父亲需要告诉 子组件， 你需要回到默认值

//  解决方法 =》给这些组件添加一个属性 clears

let clears =ref(false)
 const clearData = ()=>{

  
  clears.value =  !clears.value
 }


//分页的
const getPageData = (val:any)=>{
  getPlayListD(listParms.Playstate,listParms.time,listParms.name,val)
}
</script>

<style scoped lang="scss">
.playBox {
  height: 100%;

  .topNav {
    padding: 18px 20px;
    background: #fff;
    border-radius: 20px;

    .topNav-one-three {
      width: 10%;
    }

    .topNav-two {
      margin-top: 18px;
    }
  }


  .content {
    padding: 18px 20px;
    background: #fff;
    border-radius: 20px;
    margin-top: 18px;
  }
}
</style>